<%--
  Created by IntelliJ IDEA.
  User: zeng
  Date: 2016/8/16
  Time: 16:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page pageEncoding="UTF-8" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>${title}</title>
    <link type="text/css" href="<c:url value='/resource/wx/newcss/common.css'/>" rel="stylesheet"/>
    <link rel="stylesheet" href="<c:url value='/resource/wechat/newcss/frozen.css'/>">
    <link rel="stylesheet" type="text/css" href="<c:url value='/resource/wechat/newcss/main.css'/>"/>
    <link rel="stylesheet" type="text/css" href="<c:url value='/resource/wechat/newcss/weui.css'/>"/>
    <script type="text/javascript" src="<c:url value='/resource/wx/js/jquery-2.1.1.min.js'/>"></script>
    <script type="text/javascript" src="<c:url value='/resource/wx/newjs/common.js'/>"></script>
    <style type="text/css">
        .ui-radio input{width: 15px;}
        .loading-modal {
            position:fixed;
            top:0;
            left:0;
            right:0;
            bottom:0;
            background-color: rgba(0,0,0,.1);
            display:none;
        }
        .loading-box {
            position:fixed;
            background-color:rgba(0,0,0,.3);
            width:200px;
            height:100px;
            text-align:center;
            top:50%;
            left:50%;
            margin:-50px 0 0 -100px;
            -webkit-border-radius:8px;
            -moz-border-radius:8px;
            border-radius:8px;
            overflow:hidden;
        }
        .loader-inner {margin-top: 40px;}
        @-webkit-keyframes scale {
            0% {
                -webkit-transform: scale(1);
                transform: scale(1);
                opacity: 1; }

            45% {
                -webkit-transform: scale(0.1);
                transform: scale(0.1);
                opacity: 0.7; }

            80% {
                -webkit-transform: scale(1);
                transform: scale(1);
                opacity: 1; } }
        @keyframes scale {
            0% {
                -webkit-transform: scale(1);
                transform: scale(1);
                opacity: 1; }

            45% {
                -webkit-transform: scale(0.1);
                transform: scale(0.1);
                opacity: 0.7; }

            80% {
                -webkit-transform: scale(1);
                transform: scale(1);
                opacity: 1; } }

        .ball-pulse > div:nth-child(0) {
            -webkit-animation: scale 0.75s 0s infinite cubic-bezier(.2, .68, .18, 1.08);
            animation: scale 0.75s 0s infinite cubic-bezier(.2, .68, .18, 1.08); }
        .ball-pulse > div:nth-child(1) {
            -webkit-animation: scale 0.75s 0.12s infinite cubic-bezier(.2, .68, .18, 1.08);
            animation: scale 0.75s 0.12s infinite cubic-bezier(.2, .68, .18, 1.08); }
        .ball-pulse > div:nth-child(2) {
            -webkit-animation: scale 0.75s 0.24s infinite cubic-bezier(.2, .68, .18, 1.08);
            animation: scale 0.75s 0.24s infinite cubic-bezier(.2, .68, .18, 1.08); }
        .ball-pulse > div:nth-child(3) {
            -webkit-animation: scale 0.75s 0.36s infinite cubic-bezier(.2, .68, .18, 1.08);
            animation: scale 0.75s 0.36s infinite cubic-bezier(.2, .68, .18, 1.08); }
        .ball-pulse > div {
            background-color: #ccc;
            width: 15px;
            height: 15px;
            border-radius: 100%;
            margin: 2px;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            display: inline-block; }
    </style>
</head>

<script type="text/javascript">
    var count = 0;
    var listTemp ="";
    $(function() {
        //微报警类型
        var opHtml="";
        opHtml+='<option >请选择</option>'
        opHtml+='<c:forEach items="${listCrType}" var="list"><option value="${list.val}">${list.val}</option></c:forEach>'
        $("#infotype").html(opHtml);




        var today = new Date();
        var _today = today.getFullYear()+"-"
                + (((today.getMonth()+1)<10)?('0'+(today.getMonth()+1)):(today.getMonth()+1))+"-"
                + ((today.getDate()<10)?('0'+today.getDate()):today.getDate());
        $('#date').val(_today);

        $('#save').click(function(){
            var date = $('#date').val();
            var sjhm = $('#telephone').val();
            var aliasName = $('#aliasName').val();

//            var idCard = $('#idCard').val();
//            var jtdz = $('#jtdz').val();
            var bt = $('#bt').val();
            var jbnr = $('#jbnr').val();
            var infotype=$('#infotype').val();
            var guid=$("#mguid").val();     //获得guid,由图片提交过后返回.
            var currentMemberMobile=$('#currentMemberMobile').val();
            var userguid=$('#userguid').val();
            var username=$('#username').val();

//            if(idCard == ''){
//                toast("请输入身份证号码");
//                return false;
//            }
//            if(jtdz == ''){
//                toast("请输入家庭地址");
//                return false;
//            }
            if(bt == ''){
                toast("请输入报警主题");
                return false;
            }
            if(infotype=='请选择'){
                toast('请选择报警类型');
                return false;
            }
            if(jbnr == ''){
                toast("请输入报警内容");
                return false;
            }
            if(jbnr.length<10){
                toast("报警内容不得少于十位字符");
                return false;
            }

            if(jbnr.length>200){
                toast("报警内容不得多于两百位字符");
                return false;
            }

            if(''==listTemp){
                var data={
                    'crcontent':jbnr,
                    'crtitle':bt,
                    'crtype':infotype,
                    'guid':guid,
                    'userguid':userguid,
                    'username':username,
                    'currentMemberMobile':currentMemberMobile,
                    'contanctperson':aliasName,
                    'contanctphone':sjhm
                };
            }else {
                var data={
                    'crcontent':jbnr,
                    'crtitle':bt,
                    'crtype':infotype,
                    'guid':guid,
                    'userguid':userguid,
                    'username':username,
                    'currentMemberMobile':currentMemberMobile,
                    'contanctperson':aliasName,
                    'contanctphone':sjhm,
                    'cptComplaintReportAtts':listTemp
                };
            }
            //var data = {'guid':guid,'xm':xm,'sjhm':sjhm,'sfzhm':'','jtzz':'','bt':bt,'jbnr':jbnr,'wxjblx':'1','xsly':'W','temp7':infotype};
            $.ajax({
                type : "get",
                url : "<c:url value='/weixinquery/saveytwxjbxsjb'/>",
                data : data,
                async : false,
                dataType : "json",
                success : function(resp){
                    if(resp.succ){
                        //ajaxFileUpload(guid);
                        toast("提交微报警成功!");
                        $("#save").attr("disabled",true);
                        window.location.href = "http://ynwx.yungov.cn/econsole/weixin/wx_member/baseOauth?url=http://ynwx.yungov.cn/econsole/weixin/wx_member/index";
                        var ua = navigator.userAgent.toLowerCase();
                        if (ua.match(/MicroMessenger/i) == 'micromessenger') {
                            window.location.href = "http://ynwx.yungov.cn/econsole/weixin/wx_member/baseOauth?url=http://ynwx.yungov.cn/econsole/weixin/wx_member/index";
                        }
                        else {
                            if (/iphone|ipad|ipod/.test(ua)) {
                                toHome();
                            } else if (/android/.test(ua)) {
                                window.webdemo.toHome();						}
                        }

                    }else{
                        toast("提交微报警失败!");
                        return false;
                    }
                }
            });

        });
    });

    function changeimg(files) {

        if(files.length > 3 || (files.length + count) > 3){
            toast("上传照片不能大于3张");
            return false;
        }

        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            //判断类型是不是图片
            if(!/image\/\w+/.test(file.type)){
                obj.outerHTML = obj.outerHTML.replace(/(value=\").+\"/i, "$1\"");
                toast("请确保文件为图像类型");
                return false;
            }
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function(e){
                $('#images').append("<li class='weui_uploader_file' style='background-image:url("+this.result+")'>");
            }

            count ++;
            //异步提交图片
            var guid=$("#mguid").val();
            ajaxFileUpload(guid,files[i]);
        }
        $(".loading-modal").show();


    }
    var vCount = 0;
    //视频上传方法
    function changevedio(files) {
        console.log(files);
        //控制视频数量
        if(files.length + vCount > 1){
            toast("只能上传一个视频");
            return false;
        }
        var file = files[0];
        //限制文件大小
        console.log(file.size);
        if(file.size>1024*1024*20){
            toast("视频最大不能超过20M")
            return false;
        }
        //判断类型是不是视频
        if(!/video\/\w+/.test(file.type)){
            file.value = "";
            toast("请确保文件为视频类型");
            return false;
        }
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(e){
            $('#vedios').append("<li class='weui_uploader_file' style='background-image:url(${pageContext.request.contextPath}/resource/wx/newimg/sss.png)'></li>");
        }
        vCount ++;
        //回显

        $(".loading-modal").show();
        //异步提交视频
        var guid=$("#mguid").val();
        ajaxVedioUpLoad(guid,files[0]);
    }

    function ajaxFileUpload(guid,obj){

        var formData = new FormData();
        formData.append("file",obj);
        $.ajax({
            url: '${uplodaUrl}', //用于文件上传的服务器端请求地址
            type : "POST",
            data: formData,//参数
            dataType: 'json' ,//返回值类型 一般设置为json
            contentType: false,
            processData: false,
            success: function (data) {
                $(".loading-modal").hide();
                toast("提交照片成功");
                $("#mguid").val(data.data.guid);
                listTemp+= "{";
                listTemp+=data.data.md5 +";";
                listTemp+=data.data.guid +";";
                listTemp+=data.data.size +";";
                listTemp+=data.data.name +";";
                listTemp+=parseInt(0) +"},";
            },
            error: function (data, status, e) {
                toast("提交照片失败");
            }
        });
    }
    function ajaxVedioUpLoad(guid,obj) {
        var formData = new FormData();
        formData.append("file",obj);
        $.ajax({
            url: '${uplodaUrl}', //用于文件上传的服务器端请求地址
            type : "POST",
            data: formData,//参数
            dataType: 'json' ,//返回值类型 一般设置为json
            contentType: false,
            processData: false,
            success: function (data) {
                if(data.succ==true){
                    $(".loading-modal").hide();
                    toast("视频上传成功");
                    // console.log(data.data);
                    $("#mguid").val(data.data.guid);
                    listTemp+= "{";
                    listTemp+=data.data.md5 +";";
                    listTemp+=data.data.guid +";";
                    listTemp+=data.data.size +";";
                    listTemp+=data.data.name +";";
                    listTemp+=parseInt(0) +"},";

                }else{
                    toast(data.msg);
                }
            },
            error: function (data, status, e) {
                toast("视频上传失败");
            }
        });
    }
</script>

<body ontouchstart>
<section class="ui-container">
    <div style="clear: both;"></div>
    <div class="demo-item">
        <div class="demo-block">
            <div class="ui-form ui-border-t">
                <form action="#">
                    <input id="date" type="date" hidden="hidden"/>
                    <input id="mguid" value="${guid}" hidden="hidden">
                    <input id="currentMemberMobile"  value="${currentMemberMobile}" hidden="hidden">
                    <input id="userguid"  value="${userguid}" hidden="hidden">
                    <input id="username" value="${username}"  hidden="hidden">
                    <div class="ui-form-item ui-border-b">
                        <label>
                            <span class="t_red">*</span>报警主题：
                        </label>
                        <input id="bt" type="text" placeholder="" value="" maxlength="200"/>
                    </div>

                    <div class="ui-form-item ui-border-b">
                        <label>
                            <span class="t_red">&nbsp;</span>联&nbsp;&nbsp;系&nbsp;&nbsp;人：
                        </label>
                        <input id="aliasName" type="text" placeholder="" value="${aliasNameWjb}" maxlength="10"/>
                    </div>
                    <div class="ui-form-item ui-border-b">
                        <label>
                            <span class="t_red">&nbsp;</span>联系电话：
                        </label>
                        <input id="telephone" type="text" placeholder=""  value="${telephoneWjb}"  maxlength="20"/>
                    </div>

                    <%--<div class="ui-form-item ui-border-b">--%>
                        <%--<label>--%>
                            <%--<span class="t_red">*</span>身份证号：--%>
                        <%--</label>--%>
                        <%--<input id="idCard" type="text" placeholder="" value="${idCard}" />--%>
                    <%--</div>--%>

                    <%--<div class="ui-form-item ui-border-b">--%>
                        <%--<label>--%>
                            <%--<span class="t_red">*</span>家庭住址：--%>
                        <%--</label>--%>
                        <%--<input id="jtdz" type="text" placeholder="" value="" />--%>
                    <%--</div>--%>

                    <div class="ui-form-item ui-border-b">
                        <span class="t_red">*</span>报警类型：
                        <select id="infotype" name="infotype" onchange="" >


                        </select>
                    </div>

                    <div class="ui-form-item ui-form-item-textarea ui-border-b">
                        <label>
                            <span class="t_red">*</span>报警内容：
                        </label>
                        <textarea id="jbnr" placeholder="" maxlength="500"></textarea>
                    </div>

                    <div class="weui_cell_bd weui_cell_primary">
                        <div class="weui_uploader">

                            <p class="jfjj_tit">图片上传：<span class="bz">最多上传三张图片（每张照片不超过2M）</span></p>

                            <div class="weui_uploader_bd jfjj_upload">
                                <ul class="weui_uploader_files">
                                    <sapn id="images"></sapn>
                                </ul>

                                <div class="weui_uploader_input_wrp">
                                    <input class="weui_uploader_input" type="file" accept="image/*"  capture="camera"
                                           multiple="multiple" onchange="changeimg(this.files)" name="photos" id="uploadfiles"/>
                                </div>

                            </div>

                        </div>
                    </div>
                    <%--上传视频--%>
                    <div class="weui_cell_bd weui_cell_primary">
                        <div class="weui_uploader">

                            <p class="jfjj_tit">视频上传：<span class="bz">最多上传一个视频（每个视频不超过20M）</span></p>

                            <div class="weui_uploader_bd jfjj_upload">
                                <ul class="weui_uploader_files">
                                    <sapn id="vedios"></sapn>
                                </ul>

                                <div class="weui_uploader_input_wrp">
                                    <input class="weui_uploader_input" type="file" accept="video/*"  capture="camera"
                                           onchange="changevedio(this.files)" name="video" id="uploadvedio"/>
                                </div>

                            </div>

                        </div>
                    </div>
                </form>
            </div>

        </div>
    </div>

    <div class="ui-btn-wrap">
        <button id="save" class="ui-btn-lg ui-btn-primary">
            提交
        </button>
    </div>

</section>
<div class="loading-modal">
    <div class="loading-box">
        <div class="loader-inner ball-pulse">
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>
</body>
</html>
